import React, { Component } from 'react'
import Dialog from './Dialog'

export default class Mark extends Component {
    state = {
        flag: false
    }
    // 出现弹框
    setFlag = () => {
        this.setState({
            flag: true
        })
    }
    // 传递给子组件的函数 ==> 用来修改flag
    sendFn = (flag) => {
        this.setState({
            flag
        })
    }
    render() {
        const { flag } = this.state
        return (
            <div className = "h100">
                <h3 onClick = {() => {
                    this.setFlag()
                }}>
                    点击打开Dialog
                </h3>
                {/* 通过数组添加多个类目 */}
                <div className = { [flag? 'block': 'none', 'h100'].join(' ') }>
                    <Dialog fn = { this.sendFn }/>
                </div>
            </div>
        )
    }
}
